// 热门推荐
$.getJSON('../mock/jiayong.json', function(data) {
    console.log(data);
    // 1.初始化页面
    console.log();
    showPage(data[0].remen[0]);
    // 2.鼠标mouseover时数据和样式进行改变
    $('.hot .hot-right li').mouseover(function() {
        // 样式
        $(this).addClass('blue').siblings().removeClass('blue');
        // 数据进行改变
        var indexValue = $(this).index();
        showPage(data[0].remen[indexValue])
    });
});

function showPage(data) {
    console.log(data);
    // 设置初始值
    var pageDatas = `
    <li class="first">
      <div class="p-img">
        <a href="" target="_blank"><img src="${data[0].good_urls.nowurl}" alt=""></a>
    </div>
    <div class="p-info">
        <div class="info-name"><a href="" target="_blank">${data[0].goods_title} </a></div>
        <div class="info-handle">
            <div class="info-price">${data[0].goods_price} </div>
            <a href="h" class="info-btn" target="_blank">查看详情</a>
        </div>
    </div>
</li>`;
    for (var i = 1; i < data.length; i++) {
        pageDatas += `
        <li>
        <div class="p-img">
            <a href="" target="_blank"><img src="${data[i].good_urls.nowurl}" alt=""></a>
        </div>
        <div class="p-name"><a href="" target="_blank" title="">${data[i].goods_title} </a></div>
        <div class="p-price">${data[i].goods_price}</div>
    </li> `
    };
    // 设置到页面上
    $('.hot2').html(pageDatas);
}

// 厨房电器
$.getJSON('../mock/jiayong.json', function(data) {
    console.log(data);
    // 1.初始化页面
    console.log();
    showPage(data[0].chufang[0]);
    // 2.鼠标mouseover时数据和样式进行改变
    $('.aaa ul li').mouseover(function() {
        // 样式
        $(this).addClass('on').siblings().removeClass('on');
        // 数据进行改变
        var indexValue = $(this).index();
        showPage(data[0].chufang[indexValue])
    });
});
function showPage(data) {
    console.log(data);
    // 设置初始值
    var pageDatas = `
    <li class="first">
      <div class="p-img">
        <a href="" target="_blank"><img src="${data[0].good_urls.nowurl}" alt=""></a>
    </div>
    <div class="p-info">
        <div class="info-name"><a href="" target="_blank">${data[0].goods_title} </a></div>
        <div class="info-handle">
            <div class="info-price">${data[0].goods_price} </div>
            <a href="h" class="info-btn" target="_blank">查看详情</a>
        </div>
    </div>
</li>`;
    for (var i = 1; i < data.length; i++) {
        pageDatas += `
        <li>
        <div class="p-img">
            <a href="" target="_blank"><img src="${data[i].good_urls.nowurl}" alt=""></a>
        </div>
        <div class="p-name"><a href="" target="_blank" title="">${data[i].goods_title} </a></div>
        <div class="p-price">${data[i].goods_price}</div>
    </li> `
    };
    // 设置到页面上
    $('.fgoods-list').html(pageDatas);
}

// 大家电

$.getJSON('../mock/jiayong.json', function(data) {
    console.log(data);
    // 1.初始化页面
    console.log();
    showPage1(data[0].dajia[0]);
    // 2.鼠标mouseover时数据和样式进行改变
    $('.bbb ul li').mouseover(function() {
        // 样式
        $(this).addClass('on').siblings().removeClass('on');
        // 数据进行改变
        var indexValue = $(this).index();
        showPage1(data[0].dajia[indexValue])
    });

});

function showPage1(data) {
    console.log(data);
    // 设置初始值
    var pageDatas = `
    <li class="first">
      <div class="p-img">
        <a href="" target="_blank"><img src="${data[0].good_urls.nowurl}" alt=""></a>
    </div>
    <div class="p-info">
        <div class="info-name"><a href="" target="_blank">${data[0].goods_title} </a></div>
        <div class="info-handle">
            <div class="info-price">${data[0].goods_price} </div>
            <a href="h" class="info-btn" target="_blank">查看详情</a>
        </div>
    </div>
</li>`;
    for (var i = 1; i < data.length; i++) {
        pageDatas += `
        <li>
        <div class="p-img">
            <a href="" target="_blank"><img src="${data[i].good_urls.nowurl}" alt=""></a>
        </div>
        <div class="p-name"><a href="" target="_blank" title="">${data[i].goods_title} </a></div>
        <div class="p-price">${data[i].goods_price}</div>
    </li> `
    };
    // 设置到页面上
    $('.fgoods-list1').html(pageDatas);


}


// 个户健康
$.getJSON('../mock/jiayong.json', function(data) {
    console.log(data);
    // 1.初始化页面
    console.log();
    showPage2(data[0].gehu[0]);
    // 2.鼠标mouseover时数据和样式进行改变
    $('.ccc ul li').mouseover(function() {
        // 样式
        $(this).addClass('on').siblings().removeClass('on');
        // 数据进行改变
        var indexValue = $(this).index();
        showPage2(data[0].gehu[indexValue])
    });

});

function showPage2(data) {
    console.log(data);
    // 设置初始值
    var pageDatas = `
    <li class="first">
      <div class="p-img">
        <a href="" target="_blank"><img src="${data[0].good_urls.nowurl}" alt=""></a>
    </div>
    <div class="p-info">
        <div class="info-name"><a href="" target="_blank">${data[0].goods_title} </a></div>
        <div class="info-handle">
            <div class="info-price">${data[0].goods_price} </div>
            <a href="h" class="info-btn" target="_blank">查看详情</a>
        </div>
    </div>
</li>`;
    for (var i = 1; i < data.length; i++) {
        pageDatas += `
        <li>
        <div class="p-img">
            <a href="" target="_blank"><img src="${data[i].good_urls.nowurl}" alt=""></a>
        </div>
        <div class="p-name"><a href="" target="_blank" title="">${data[i].goods_title} </a></div>
        <div class="p-price">${data[i].goods_price}</div>
    </li> `
    };
    // 设置到页面上
    $('.fgoods-list2').html(pageDatas);


}

// 五金家装
$.getJSON('../mock/jiayong.json', function(data) {
    console.log(data);
    // 1.初始化页面
    console.log();
    showPage3(data[0].wujin[0]);
    // 2.鼠标mouseover时数据和样式进行改变
    $('.ddd ul li').mouseover(function() {
        // 样式
        $(this).addClass('on').siblings().removeClass('on');
        // 数据进行改变
        var indexValue = $(this).index();
        showPage3(data[0].wujin[indexValue])
    });

});

function showPage3(data) {
    console.log(data);
    // 设置初始值
    var pageDatas = `
    <li class="first">
      <div class="p-img">
        <a href="" target="_blank"><img src="${data[0].good_urls.nowurl}" alt=""></a>
    </div>
    <div class="p-info">
        <div class="info-name"><a href="" target="_blank">${data[0].goods_title} </a></div>
        <div class="info-handle">
            <div class="info-price">${data[0].goods_price} </div>
            <a href="h" class="info-btn" target="_blank">查看详情</a>
        </div>
    </div>
</li>`;
    for (var i = 1; i < data.length; i++) {
        pageDatas += `
        <li>
        <div class="p-img">
            <a href="" target="_blank"><img src="${data[i].good_urls.nowurl}" alt=""></a>
        </div>
        <div class="p-name"><a href="" target="_blank" title="">${data[i].goods_title} </a></div>
        <div class="p-price">${data[i].goods_price}</div>
    </li> `
    };
    // 设置到页面上
    $('.fgoods-list3').html(pageDatas);


}

// 生活电器
$.getJSON('../mock/jiayong.json', function(data) {
    console.log(data);
    // 1.初始化页面
    console.log();
    showPage4(data[0].shenghuo[0]);
    // 2.鼠标mouseover时数据和样式进行改变
    $('.eee ul li').mouseover(function() {
        // 样式
        $(this).addClass('on').siblings().removeClass('on');
        // 数据进行改变
        var indexValue = $(this).index();
        showPage4(data[0].shenghuo[indexValue])
    });

});

function showPage4(data) {
    console.log(data);
    // 设置初始值
    var pageDatas = `
    <li class="first">
      <div class="p-img">
        <a href="" target="_blank"><img src="${data[0].good_urls.nowurl}" alt=""></a>
    </div>
    <div class="p-info">
        <div class="info-name"><a href="" target="_blank">${data[0].goods_title} </a></div>
        <div class="info-handle">
            <div class="info-price">${data[0].goods_price} </div>
            <a href="h" class="info-btn" target="_blank">查看详情</a>
        </div>
    </div>
</li>`;
    for (var i = 1; i < data.length; i++) {
        pageDatas += `
        <li>
        <div class="p-img">
            <a href="" target="_blank"><img src="${data[i].good_urls.nowurl}" alt=""></a>
        </div>
        <div class="p-name"><a href="" target="_blank" title="">${data[i].goods_title} </a></div>
        <div class="p-price">${data[i].goods_price}</div>
    </li> `
    };
    // 设置到页面上
    $('.fgoods-list4').html(pageDatas);


}

// 楼层导航
var hotoffset =$('.hot').offset().top;
console.log(hotoffset);
$(window).scroll(function() {
    if ($(this).scrollTop() >= hotoffset) {
        $('.sidebar').fadeIn(594);
    } else {
        $('.sidebar').fadeOut(594);
    };
    $('.floor').each(function(index,value){
        if($(window).scrollTop()>=value.offsettop){
            $('.sidebar1').eq(index).addClass('actives').siblings().removeClass('actives');
        }
    });
});
$('.sidebar').click(function(e) {
    // 获取具体的对应楼层的偏移量
    // 真正触发事件的事件源
    var indexValue = $(e.target).index();
    var topValue = $('.floor').eq(indexValue).offset().top;
    // 回到设置的位置上
    $('html').animate({
        scrollTop: topValue
    }, 1000);
});
$('.back').click(function() {
    console.log('点击');
    // html的scrollTop=0回到顶部
    $('html').animate({
        scrollTop: 0
    }, 2000);
});




// 随手购
$.getJSON('../mock/jiayong.json', function(data) {
    console.log(data);
    // 1.初始化页面
    console.log();
    showPage5(data[0].suishou[0]);
    // 2.鼠标mouseover时数据和样式进行改变
    $('.fff ul li').mouseover(function() {
        // 样式
        $(this).addClass('on').siblings().removeClass('on');
        // 数据进行改变
        var indexValue = $(this).index();
        showPage5(data[0].suishou[indexValue])
    });

});

function showPage5(data) {
    console.log(data);
    // 设置初始值
    var pageDatas = `
    <li>
                <div class="hand-buy-list-img">
                    <img src="${data[0].good_urls.nowurl}"alt="">
                </div>
                <div class="hand-buy-list-price">
                ${data[0].goods_price}
                </div>
                <div class="hand-buy-list-name">
                ${data[0].goods_title}
                </div>
                <div class="hand-buy-list-red">查看详情</div>
            </li>`;
    for (var i = 1; i < data.length; i++) {
        pageDatas += `<li>
        <div class="hand-buy-list-img">
            <img src="${data[i].good_urls.nowurl}"alt="">
        </div>
        <div class="hand-buy-list-price">
        ${data[i].goods_price}
        </div>
        <div class="hand-buy-list-name">
        ${data[i].goods_title}
        </div>
        <div class="hand-buy-list-red">查看详情</div>
    </li>`
    };
    // 设置到页面上
    $('.floot').html(pageDatas);
}

// 随手购轮播
console.log($('.hand-buy>li'));
$('.qwe>li').mouseover(function(){
    $(this).addClass('on2').siblings().removeClass('on2');
    $('.floot').animate({
        left:-1200*$(this).index()+'px'
    })
})
$('.btn2').click(function(){
    $('.floot').animate({
        left:-600*$(this).index()+'px'
    })
})
$('.btn1').click(function(){
    $('.floot').animate({
        left:10*$(this).index()+'px'
    })
})